<script setup lang="ts">
import type { EquipmentVo } from '../type'

import BlockHead from './block-head.vue'

defineOptions({
  name: 'ItemServen',
})
const props = defineProps<{
  data1: EquipmentVo[]
  data2: EquipmentVo[]
}>()

function isRunning(status: 0 | 1) {
  return status === 1
}
function substring(str: string | number, len: number = 4) {
  str = Math.round(Number.parseFloat(str.toString()) || 0)
  str = str.toString()
  return str.length >= len ? str.substring(0, len) : str.padStart(len, '0')
}
</script>

<template>
  <div class="h-full w-full flex flex-auto flex-col">
    <BlockHead is-big title="工艺看板" />
    <div class="block-body h-150 w-full flex flex-auto flex-col items-center gap-3 overflow-auto p-3">
      <div class="w-full flex flex-1/2 items-center ring-1 ring-[rgba(26,121,181,0.5)]">
        <div class="h-full w-full flex flex-auto items-center overflow-auto p-3">
          <div class="relative h-full w-full flex items-center">
            <div v-for="i in 6" :key="i" class="item-czf flex flex-1 flex-col">
              <img v-if="data1[i - 1] && isRunning(data1[i - 1].status)" src="./equipment-images/fsj-1.png" alt="fjbzj-2">
              <img v-else src="./equipment-images/fsj.png" alt="fjbzj-1">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data1[i - 1]?.name }}</span>
            </div>
            <span class="fs-12 absolute right-0 top-0 opacity-50 font-pmzd">单位:kw</span>
          </div>
        </div>
      </div>
      <div class="w-full flex flex-1/2 items-center rounded ring-1 ring-[rgba(26,121,181,0.5)]">
        <div class="h-full w-full flex flex-auto items-center overflow-auto p-3">
          <div class="h-full w-full flex items-center">
            <div v-for="i in 3" :key="i" class="item-fjbzj flex flex-1 flex-col items-center justify-center">
              <img v-if="data2[i - 1] && isRunning(data2[i - 1].status)" src="./equipment-images/fjbzj-2.png" alt="fjbzj-2">
              <img v-else src="./equipment-images/fjbzj-1.png" alt="fjbzj-1">
              <span class="equipment-num mt-3 opacity-80 font-pmzd !relative">{{ data2[i - 1]?.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-czf {
  position: relative;
  align-items: center;
}
.item-czf {
  .image-top {
    width: 80px;
    height: 208px;
  }
}
.item-fjbzj {
  img {
    width: 164px;
    height: 164px;
  }
}

.equipment-num,
.meter-reading {
  display: block;
  position: absolute;
  border-radius: 2px;
  // background: rgba(226, 81, 252, 0.5);
  text-align: center;
}
.meter-reading {
  width: 47px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #18DEF5;
}
.equipment-num {
  width: auto;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  color: #ffffff;
text-shadow: 1px 0px 1px #10649C;
  @apply line-clamp-1;
}

.meter-reading-center {
  top: 69px;
  left: 50%;
  margin-left: -23px;
}

.equipment-num-center {
  top: 178px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
